<template>
  <div class="map-content">
    <div ref="mapChart" style="width: 100%; height: 50vh"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  mapJson: {
    type: Object,
    default: () => {}
  },
  allAreaData: {
    type: Object,
    default: () => {}
  }
})
// 判断 地图显示那个颜色的数据源
var dt: any = ref([])
watch(
  () => props.mapJson,
  (newVal) => {
    nextTick(() => {
      countMapJson.value = { ...newVal }
      initOptions()
    })
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => props.allAreaData,
  (newVal: any) => {
    console.log(newVal, 'watch 县级')
    // dt.value = [
    //   { name: '建宁县', value: 600 },
    //   { name: '沙县', value: 230 }
    // ]
    if (newVal && newVal.area && newVal.area.length) {
      dt.value = newVal.area
    }
    initOptions()
  },
  {
    deep: true
  }
)

// ref
const mapChart = ref()
const options = ref()
let myMapChart: any = ref()
const countMapJson: any = ref()

const zoom = 0.8
// 标记点数据
let _data: any = ref([])

// emits
const emits = defineEmits({
  CMapBackClick: (data) => !!data
})

// mwthod
const initOptions = () => {
  echarts.registerMap('fujianJSON', countMapJson.value)
  myMapChart.value = echarts.init(mapChart.value)
  var series: any = []

  series.push(
    {
      type: 'map',
      map: 'fujianJSON',
      zlevel: 0,
      zoom: zoom,
      itemStyle: {
        normal: {
          // borderColor: 'transparent',
          color: '#333',
          // 地图默认背景颜色
          areaColor: '#409eff',
          borderColor: '#fff',
          borderWidth: 0.2
        },
        // 鼠标移动地图时的背景颜色
        emphasis: {
          areaColor: '#4B7902',
          label: {
            show: true,
            textStyle: {
              color: '#fff' //鼠标经过字体颜色
            }
          }
        }
      },
      label: {
        normal: {
          show: true,
          textStyle: {
            color: '#333'
          }
        }
      },
      layoutCenter: ['50%', '50%'],
      layoutSize: '120%',
      data: dt.value,
      selectedMode: false // 去除地图点击后的黄色背景颜色
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      z: 3,
      zlevel: 99,
      symbolSize: 10,
      rippleEffect: {
        // 坐标点动画
        period: 2,
        scale: 4,
        brushType: 'fill'
      },
      label: {
        // 自定义 标记点的 字体描述 样式
        normal: {
          show: true,
          position: 'top',
          formatter: '  {b}',
          color: '#333',
          fontWeight: 'bold',
          fontSize: 12
        }
      },
      data: _data,
      itemStyle: {
        // 坐标点颜色
        normal: {
          color: function (params: any) {
            // console.log(params)
            const data = params.data
            let color = ''
            if (data.count > 630) {
              color = 'rgba(133, 185, 98, 1)'
            }
            if (data.count >= 560 && data.count <= 629) {
              color = 'rgba(255, 255, 38, 1)'
            }
            if (data.count >= 420 && data.count <= 559) {
              color = 'rgba(255, 201, 38, 1)'
            }
            if (data.count <= 420) {
              color = 'rgba(255, 38, 38, 1)'
            }
            return color
          }
        }
      }
    }
  )

  options.value = {
    visualMap: {
      //视觉映射组件
      // type: 'piecewise', //分段型。
      splitNumber: 6,
      inverse: true,
      pieces: [
        {
          min: 630,
          label: '好(630分以上)',
          color: '#85b962'
        },
        {
          min: 420,
          max: 559,
          label: '一般(420分~559分)',
          color: '#ffc926'
        },
        {
          min: 560,
          max: 629,
          label: '较好(560分~629分)',
          color: '#ffff26'
        },
        {
          max: 420,
          label: '差(420分以下)',
          color: '#ff2626'
        }
      ],
      left: 'right',
      bottom: '0%',
      textStyle: {
        color: '#333'
      }
    },
    geo: {
      map: 'fujianJSON',
      layoutCenter: ['50%', '50%'],
      layoutSize: '120%',
      zoom: zoom,
      itemStyle: {
        normal: {
          borderColor: '#c0f3fb',
          borderWidth: 1,
          shadowColor: '#8cd3ef',
          shadowOffsetY: 10,
          shadowBlur: 100,
          areaColor: 'transparent'
        }
      }
    },
    series: series
  }

  if (options.value && typeof options.value === 'object') {
    myMapChart.value.setOption(options.value)
  }
  // 地图点击事件
  myMapChart.value.on('click', (e: any) => {
    const data = {
      showCMap: true
    }
    // console.log(e, 'e---')
    emits('CMapBackClick', data)
  })
  window.addEventListener('resize', resize)
}

const resize = () => {
  setTimeout(() => {
    if (myMapChart.value) {
      myMapChart.value.resize()
      if (options.value && typeof options.value === 'object') {
        myMapChart.value.setOption(options.value)
      }
    }
  }, 50)
}

defineOptions({
  name: 'CountyMap'
})
</script>

<style scoped lang="scss">
.map-content {
  display: flex;
  align-items: flex-end;
  .moddle_box {
    width: 200px;
    .middle-div {
      display: flex;
      align-items: center;
      padding-top: 4px;
      padding-bottom: 4px;
      font-size: 12px;
      .middle-span {
        width: 10px;
        height: 10px;
        margin-right: 10px;
      }
      .item1 {
        background-color: #85b962;
      }

      .item2 {
        background-color: #ffff26;
      }

      .item3 {
        background-color: #ffc926;
      }

      .item4 {
        background-color: #ff2626;
      }
    }
  }
}
</style>
